<template>
  <a-modal
    v-model:open="visible"
    title="居民详细信息"
    :maskClosable="false"
    :width="1000"
    :footer="null"
    :bodyStyle="store.userStore.bodyStyle"
  >
    <div class="cont-info">居民基本信息</div>
    <a-form
      class="search-form"
      ref="formRef"
      :model="formData"
      layout="inline"
      disabled
      :labelCol="{ style: { width: '100px' } }"
    >
      <a-row :gutter="[8, 8]">
        <a-col :span="24">
          <span class="item-name">基础信息：</span>
        </a-col>
        <a-col :span="8">
          <a-form-item label="姓名" name="patName">
            <a-input v-model:value="formData.patName" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="性别" name="gender">
            <a-input v-model:value="formData.gender" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="年龄" name="age">
            <a-input v-model:value="formData.age" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="证件类型" name="idType">
            <a-input v-model:value="formData.idType" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="证件号" name="idNo">
            <a-input v-model:value="formData.idNo" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="联系电话" name="phone">
            <a-input v-model:value="formData.phone" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="ABO血型" name="abo">
            <a-input v-model:value="formData.abo" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="Rh血型" name="rh">
            <a-input v-model:value="formData.rh" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="国籍" name="nationality">
            <a-input v-model:value="formData.nationality" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="民族" name="nation">
            <a-input v-model:value="formData.nation" />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="8">
          <a-form-item label="出生日期" name="birthday">
            <a-input v-model:value="formData.birthday" />
          </a-form-item>
        </a-col> -->
        <a-col :span="8">
          <a-form-item label="婚姻状况" name="marital">
            <a-input v-model:value="formData.marital" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="学历" name="education">
            <a-input v-model:value="formData.education" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="医疗支付方式" name="medicare">
            <a-input v-model:value="formData.medicare" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="职业类别" name="occupation">
            <a-input v-model:value="formData.occupation" />
          </a-form-item>
        </a-col>
        <!-- <a-col :span="8">
          <a-form-item label="现住址">
            <a-input v-model:value="formData.occupation" />
          </a-form-item>
        </a-col> -->

        <a-col :span="24">
          <span class="item-name">现住址：</span>
        </a-col>
        <a-col :span="24">
          <a-form-item label="详细地址" name="address">
            <a-input v-model:value="formData.address" />
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <span class="item-name">联系人：</span>
        </a-col>
        <a-col :span="8">
          <a-form-item label="关系" name="contactRelation">
            <a-input v-model:value="formData.contactRelation" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="姓名" name="contactName">
            <a-input v-model:value="formData.contactName" />
          </a-form-item>
        </a-col>
        <a-col :span="8">
          <a-form-item label="电话" name="contactPhone">
            <a-input v-model:value="formData.contactPhone" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="cont-info">医疗信息</div>
    <a-tabs
      v-model:activeKey="activeKey"
      :bordered="false"
      size="small"
      :style="{ height: '80px' }"
    >
      <a-tab-pane v-for="item in tabsList" :key="item.value" :tab="item.label">
        {{ historyData[item.value] ? historyData[item.value] : '' }}
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import store from '@/store'
import { getPatientInfoHistory } from '@/api/patientMana'
const activeKey = ref('既往史')
const tabsList = ref([
  {
    label: '既往史',
    value: 'elapseHis'
  },
  {
    label: '过敏史',
    value: 'allergyHis'
  },
  {
    label: '家族史',
    value: 'familyHis'
  },
  {
    label: '外伤史',
    value: 'hurtHis'
  },
  {
    label: '月经史',
    value: 'mouthHis'
  },
  {
    label: '婚育史',
    value: 'marriageHis'
  }
])
const formData = reactive({
  patName: '',
  gender: '',
  age: '',
  idType: '',
  idNo: '',
  phone: '',
  abo: '',
  rh: '',
  nationality: '',
  nation: '',
  birthday: '',
  marital: '',
  education: '',
  medicare: '',
  occupation: '',
  address: '',
  contactRelation: '',
  contactName: '',
  contactPhone: ''
})
const visible = ref(false)
const formRef = ref()
const historyData: any = ref({})
const init = (data) => {
  visible.value = true
  historyData.value = {}
  activeKey.value = 'elapseHis'
  nextTick(() => {
    if (formRef.value) {
      formRef.value.resetFields()

      if (data) {
        Object.assign(formData, data)

        if (formData.gender == '女性') {
          tabsList.value = [
            {
              label: '既往史',
              value: 'elapseHis'
            },
            {
              label: '过敏史',
              value: 'allergyHis'
            },
            {
              label: '家族史',
              value: 'familyHis'
            },
            {
              label: '外伤史',
              value: 'hurtHis'
            },
            {
              label: '月经史',
              value: 'mouthHis'
            },
            {
              label: '婚育史',
              value: 'marriageHis'
            }
          ]
        } else {
          tabsList.value = [
            {
              label: '既往史',
              value: 'elapseHis'
            },
            {
              label: '过敏史',
              value: 'allergyHis'
            },
            {
              label: '家族史',
              value: 'familyHis'
            },
            {
              label: '外伤史',
              value: 'hurtHis'
            }
          ]
        }

        getPatientInfoHistory({ empi: data.empi }).then((res) => {
          historyData.value = res.data
        })
      }
    }
  })
}

defineExpose({
  init
})
</script>
<style lang="less" scoped>
.search-form {
  .ant-form-item {
    margin-bottom: 10px;
  }

  .item-name {
    font-weight: 600;
  }
}

.cont-info {
  padding-left: 16px;
  margin: 10px 0;
  font-weight: 600;
  line-height: 30px;
  color: #1d2129;
  background: #f7f8fa;
}
</style>
